// 给所有的ajax请求的 HTTP 请求头统一加上 token
$(document).ajaxSend(function (e, xhr, opt) {
    var token = localStorage.getItem("token");
    xhr.setRequestHeader('user_token_header', token);
}) 

// 统一处理错误
let flag = false;
$(document).ajaxError(function (e, xhr, opt) {
    if (!flag) {
        alert("当前未登录");
        location.assign("/login.html");
        flag = true;
    }
});


////////////////////////////////////////////
// 这里实现标签页的切换
////////////////////////////////////////////

function initSwitchTab() {
    // 1. 先获取到相关的元素(标签页的按钮, 会话列表, 好友列表)
    let tabSession = document.querySelector('.tab .tab-session');
    let tabFriend = document.querySelector('.tab .tab-friend');
    // querySelectorAll 可以同时选中多个元素. 得到的结果是个数组
    // [0] 就是会话列表
    // [1] 就是好友列表
    let lists = document.querySelectorAll('.list');
    // 2. 针对标签页按钮, 注册点击事件. 
    //    如果是点击 会话标签按钮, 就把会话标签按钮的背景图片进行设置. 
    //    同时把会话列表显示出来, 把好友列表隐藏
    //    如果是点击 好友标签按钮, 就把好友标签按钮的背景图片进行设置. 
    //    同时把好友列表显示出来, 把会话列表进行隐藏
    tabSession.onclick = function() {
        // a) 设置图标
        tabSession.style.backgroundImage = 'url(img/对话.png)';
        tabFriend.style.backgroundImage = 'url(img/用户2.png)';
        // b) 让会话列表显示出来, 让好友列表进行隐藏
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }

    tabFriend.onclick = function() {
        // a) 设置图标
        tabSession.style.backgroundImage = 'url(img/对话2.png)';
        tabFriend.style.backgroundImage = 'url(img/用户.png)'
        // b) 让好友列表显示, 让会话列表隐藏
        lists[0].classList = 'list hide';
        lists[1].classList = 'list';
    }
}

initSwitchTab();

/////////////////////////////////////////////////////
// 操作 websocket
/////////////////////////////////////////////////////

// 创建 websocket 实例
// let websocket = new WebSocket("ws://127.0.0.1:8080/WebSocketMessage");
let websocket;
function setupWebSocket() {
    var token = localStorage.getItem("token");
    websocket = new WebSocket("ws://" + location.host + "/WebSocketMessage", [token]);

    websocket.onopen = function() {
        console.log("websocket 连接成功!");
    }

    websocket.onmessage = function(e) {
        console.log("websocket 收到消息! " + e.data);
        // 此时收到的 e.data 是个 json 字符串, 需要转成 js 对象
        let resp = JSON.parse(e.data);
        if (resp.type == 'message') {
            // 处理消息响应
            handleMessage(resp);
        } else if(resp.type == 'addFriend'){
            // 处理好友申请请求
            handleAddRequest(resp);
        } else if(resp.type == 'addResponse'){
            // 处理好友申请响应
            handleAddResponse(resp);
        } else {
            // resp 的 type 出错!
            console.log("resp.type 不符合要求!");
        }
    }

    websocket.onclose = function(event) {
        if (event.code == 4888) {
            alert("身份信息已过期，请重新登录")
            location.assign("/login.html");
        }

        console.log("连接关闭，尝试重新连接");
        setTimeout(setupWebSocket, 6000);       // 6秒后尝试重新连接
        
        console.log("websocket 连接关闭!");
    }

    websocket.onerror = function() {
        console.log("websocket 连接异常!");
    }

}
// 初始化WebSocket连接
setupWebSocket();

function handleMessage(resp) {
    // 把客户端收到的消息, 给展示出来. 
    // 展示到对应的会话预览区域, 以及右侧消息列表中. 

    // 1. 根据响应中的 sessionId 获取到当前会话对应的 li 标签. 
    //    如果 li 标签不存在, 则创建一个新的
    let curSessionLi = findSessionLi(resp.sessionId);
    if (curSessionLi == null) {
        // 就需要创建出一个新的 li 标签, 表示新会话. 
        curSessionLi = document.createElement('li');
        curSessionLi.className = "session";
        curSessionLi.setAttribute('message-session-id', resp.sessionId);
        // 此处 p 标签内部应该放消息的预览内容. 一会后面统一完成, 这里先置空
        curSessionLi.innerHTML = '<h3>' + resp.fromName + '</h3>'
            + '<p></p>';
        // 给这个 li 标签也加上点击事件的处理
        curSessionLi.onclick = function() {
            clickSession(curSessionLi);
        }
    }
    // 2. 把新的消息, 显示到会话的预览区域 (li 标签里的 p 标签中)
    //    如果消息太长, 就需要进行截断. 
    let p = curSessionLi.querySelector('p');
    p.innerHTML = resp.content;
    if (p.innerHTML.length > 10) {
        p.innerHTML = p.innerHTML.substring(0, 10) + '...';
    }
    // 3. 把收到消息的会话, 给放到会话列表最上面. 
    let sessionListUL = document.querySelector('#session-list');
    sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);
    // 4. 如果当前收到消息的会话处于被选中状态, 则把当前的消息给放到右侧消息列表中. 
    //    新增消息的同时, 注意调整滚动条的位置, 保证新消息虽然在底部, 但是能够被用户直接看到. 
    if (curSessionLi.className == 'selected') {
        // 把消息列表添加一个新消息. 
        let messageShowDiv = document.querySelector('.right .message-show');
        addMessage(messageShowDiv, resp);
        scrollBottom(messageShowDiv);
    }
    // 其他操作, 还可以在会话窗口上给个提示 (红色的数字, 有几条消息未读), 还可以播放个提示音.  
    // 这些操作都是纯前端的. 实现也不难, 不是咱们的重点工作. 暂时不做了. 
}

function findSessionLi(targetSessionId) {
    // 获取到所有的会话列表中的 li 标签
    let sessionLis = document.querySelectorAll('#session-list li');
    for (let li of sessionLis) {
        let sessionId = li.getAttribute('message-session-id');
        if (sessionId == targetSessionId) {
            return li;
        }
    }
    // 啥时候会触发这个操作, 就比如如果当前新的用户直接给当前用户发送消息, 此时没存在现成的 li 标签
    return null;
}




//// 接收到好友申请，实时把请求置顶
function handleAddRequest(resp) {
    if(resp.requestMessage.length > 8) {
        resp.requestMessage = resp.requestMessage.substring(0,8) + '...';
    }

    // 1. 查看 sessionList 是否存在该申请消息，存在则修改申请内容，不存在则新增申请
    var allAddRequestLi = document.querySelectorAll('#session-list > li');
    let sessionListUL = document.querySelector('#session-list');
    if(allAddRequestLi != null) {
        console.log("111111111111111");
        // document.querySelector("#session-list > li:nth-child(1) > div.content")
        document.querySelector("#session-list > li:nth-child(2) > div.content > h3")
        for(let addRequestLi of allAddRequestLi) {
            if (addRequestLi.className == 'session') continue;
            var content = addRequestLi.querySelector('div.content');
            var fromName = content.querySelector('h3').textContent;
            if(fromName == resp.fromName) {
                content.querySelector('p').textContent = resp.requestMessage;
                sessionListUL.insertBefore(addRequestLi, sessionListUL.children[0]);
                return;
            }
        }
    }



    // 2. 构造li标签并给 按钮添加点击事件
    var tempContainer = document.createElement("div");
    liString = '<li><div class="content">' + 
        '<h3>' + resp.fromName + '</h3>' +
        '<p>' + resp.requestMessage + '</p>' + '</div>'+
        '<div class="buttons">' +
        '<button>同意</button>' + 
        '<button>拒绝</button>' + '</div></li>';        

    tempContainer.innerHTML = liString;
    var li = tempContainer.querySelector('li');  
    li.className = "add-request";              
    var acceptButton = li.querySelector(".buttons > button:nth-child(1)")
    acceptButton.onclick = function() {
        handleRequest(resp.fromId,resp.toId,1)
    };
    var rejectButton = li.querySelector(".buttons > button:nth-child(2)")
    rejectButton.onclick = function() {
        handleRequest(resp.fromId,resp.toId,2);
    }
    // 3. 将好友申请置顶
    sessionListUL.insertBefore(li, sessionListUL.children[0]);
}



// 处理好友请求(同意或拒绝)     对于被添加者，如果同意则跳转到好友列表并显示新增好友；对于添加者，刷新好友列表数据
function handleRequest(fromId, toId, status) {
    let req = {
        type: 'addResponse',
        fromId: fromId,
        toId: toId,
        validFlag: status
    };
    req = JSON.stringify(req);
    websocket.send(req);
    console.log("[websocket] addResponse: " + req);
    
}


// 实时显示添加状态
function handleAddResponse(addResponse) {
    let userDiv = document.querySelector('.main .left .user');
    var userId = userDiv.getAttribute("user-id");          
    if (userId == addResponse.toId) {
        getAddRequestList();
        getSessionList();
        // 点击同意或拒绝方，刷新friendList，addRequestList, sessionList，跳转到好友列表
        if (addResponse.validFlag == 1) {
            getFriendList();
            let tab_friend = document.querySelector('.left .tab .tab-friend');
            tab_friend.click();
        }  else {
            let tab_session = document.querySelector('.left .tab .tab-session');
            tab_session.click();
        }
    } else {
        if (addResponse.validFlag == 1) {
            getFriendList();
        }
    }   
}



/////////////////////////////////////////////////////
// 实现消息发送/接收逻辑
/////////////////////////////////////////////////////

function initSendButton() {
    // 1. 获取到发送按钮 和 消息输入框
    let sendButton = document.querySelector('.right .ctrl button');
    let messageInput = document.querySelector('.right .message-input');
    // 2. 给发送按钮注册一个点击事件
    sendButton.onclick = function() {
        // a) 先针对输入框的内容做个简单判定. 比如输入框内容为空, 则啥都不干
        if (!messageInput.value) {
            // value 的值是 null 或者 '' 都会触发这个条件
            return;
        }
        // b) 获取当前选中的 li 标签的 sessionId
        let selectedLi = document.querySelector('#session-list .selected');
        if (selectedLi == null) {
            // 当前没有 li 标签被选中. 
            return;
        }
        let sessionId = selectedLi.getAttribute('message-session-id');
        // c) 构造 json 数据
        let req = {
            type: 'message',
            sessionId: sessionId,
            content: messageInput.value
        };
        req = JSON.stringify(req);
        console.log("[websocket] send: " + req);
        // d) 通过 websocket 发送消息
        websocket.send(req);
        // e) 发送完成之后, 清空之前的输入框
        messageInput.value = '';
    }
}

initSendButton();



/////////////////////////////////////////////////////
// 从服务器获取到用户登录数据
/////////////////////////////////////////////////////

function getUserInfo() {
    $.ajax({
        type: 'get',
        url: 'user/getUserInfo',
        success: function(body) {
            // 从服务器获取到数据. 
            // 校验结果是否有效. 
            if (body.code == 200 && body.data.id > 0) {
                // 如果结果有效, 则把用户名显示到界面上. 
                // 同时也可以记录 userId 到 html 标签的属性中. (以备后用)
                let userDiv = document.querySelector('.main .left .user');
                userDiv.innerHTML = body.data.username;
                userDiv.setAttribute("user-id", body.data.id);
            } else {
                // 如果结果无效, 当前未登录! 则跳转到登录页面. 
                alert("当前用户未登录!");
                location.assign('login.html');
            }
        }
    });
}

getUserInfo();

function getFriendList() {
    $.ajax({
        type: 'get',
        url: 'friend/getFriendList',
        success: function(body) {
            // 1. 先把之前的好友列表的内容, 给清空
            let friendListUL = document.querySelector('#friend-list');
            friendListUL.innerHTML = '';
            // 2. 遍历 body, 把服务器响应的结果, 加回到当前的 friend-list 中. 
            console.log(body.data);
            for (let friend of body.data) {
                let li = document.createElement('li');
                li.innerHTML = '<h4>' + friend.friendName + '</h4>';
                // 此处把 friendId 也记录下来, 以备后用. 
                // 把 friendId 作为一个 html 的自定义属性, 加到 li 标签上就行了. 
                li.setAttribute('friend-id', friend.friendId);
                friendListUL.appendChild(li);

                // 每个 li 标签, 就对应界面上的一个好友的选项. 给这个 li 加上点击事件的处理. 
                li.onclick = function() {
                    // 参数表示区分了当前用户点击的是哪个好友. 
                    clickFriend(friend);
                }
            }
        },
        error: function() {
            console.log('获取好友列表失败!');
        }
    });
}
getFriendList();




// 获取好友申请列表
function getAddRequestList() {
    $.ajax({
        type: 'get',
        url: '/friend/getAddRequests',
        success: function(result) {
            // 1. 清空之前的会话列表
            let sessionListUL = document.querySelector('#session-list');
            sessionListUL.innerHTML = '';
            // 2. 遍历响应中的 data数组，把收到的好友请求添加到最上面
            if(result.code == 200 && result.data != null) {
                for (let addRequest of result.data) {
                    if(addRequest.requestMessage.length > 8) {
                        addRequest.requestMessage = addRequest.requestMessage.substring(0,8) + '...';
                    }
                    
                    // 创建一个临时容器，再从容器取出元素，否则会出现 null 错误
                    // 创建一个临时容器，再从容器取出元素，否则会出现 null 错误
                    // 创建一个临时容器，再从容器取出元素，否则会出现 null 错误
                    var tempContainer = document.createElement("div");
                    liString = '<li><div class="content">' + 
                        '<h3>' + addRequest.fromName + '</h3>' +
                        '<p>' + addRequest.requestMessage + '</p>' + '</div>'+
                        '<div class="buttons">' +
                        '<button>同意</button>' + 
                        '<button>拒绝</button>' + '</div></li>';        

                    tempContainer.innerHTML = liString;
                    var li = tempContainer.querySelector('li');  
                    li.className = "add-request";              
                    var acceptButton = li.querySelector(".buttons > button:nth-child(1)")
                    acceptButton.onclick =  function() {
                        handleRequest(addRequest.fromId,addRequest.toId,1);
                    }
                    var rejectButton = li.querySelector(".buttons > button:nth-child(2)")
                    rejectButton.onclick =  function() {
                        handleRequest(addRequest.fromId,addRequest.toId,2);
                    }
                    sessionListUL.appendChild(li);
                    
                }
            }
        }
    });
}
getAddRequestList();

function getSessionList() {
    $.ajax({
        type: 'get',
        url: '/session/getSessionList',
        success: function(body) {
            // 1. 清空之前的会话列表
            let sessionListUL = document.querySelector('#session-list');
            // sessionListUL.innerHTML = '';
            
            // 2. 遍历响应的数组, 针对结果来构造页面
            for (let session of body.data) {
                // 针对 lastMessage 的长度进行截断处理
                if (session.lastMessage.length > 15) {
                    session.lastMessage = session.lastMessage.substring(0, 15) + '...';
                }

                let li = document.createElement('li');
                li.className = "session"
                // 把会话 id 保存到 li 标签的自定义属性中. 
                li.setAttribute('message-session-id', session.sessionId);
                li.innerHTML = '<h3>' + session.friends[0].friendName + '</h3>' 
                    + '<p>' + session.lastMessage + '</p>';
                sessionListUL.appendChild(li);

                // 给 li 标签新增点击事件
                li.onclick = function() {
                    // 这个写法, 就能保证, 点击哪个 li 标签
                    // 此处对应的 clickSession 函数的参数就能拿到哪个 li 标签. 
                    clickSession(li);
                }
            }
        }
    });
}

getSessionList();

function clickSession(currentLi) {
    // 1. 设置高亮
    // 获取所有className为 session和selected 的li标签
    let allLis = document.querySelectorAll('#session-list>li.session');
    let selectdLi = document.querySelectorAll('#session-list>li.selected');
    allLis = Array.from(allLis).concat(Array.from(selectdLi));
    activeSession(allLis, currentLi);
    // 2. 获取指定会话的历史消息 TODO
    let sessionId = currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

function activeSession(allLis, currentLi) {
    // 这里的循环遍历, 更主要的目的是取消未被选中的 li 标签的 className
    for (let li of allLis) {
        if (li == currentLi) {
            li.className = 'selected';
        } else {
            li.className = 'session';
        }
    }
}

// 这个函数负责获取指定会话的历史消息. 
function getHistoryMessage(sessionId) {
    console.log("获取历史消息 sessionId=" + sessionId);
    // 1. 先清空右侧列表中的已有内容
    let titleDiv = document.querySelector('.right .title');
    titleDiv.innerHTML = '';
    let messageShowDiv = document.querySelector('.right .message-show');
    messageShowDiv.innerHTML = '';

    // 2. 重新设置会话的标题. 新的会话标题是点击的那个会话上面显示的标题
    //    先找到当前选中的会话是哪个. 被选中的会话带有 selected 类的. 
    let selectedH3 = document.querySelector('#session-list .selected>h3');
    if (selectedH3) {
        // selectedH3 可能不存在的. 比如页面加载阶段, 可能并没有哪个会话被选中. 
        // 也就没有会话带有 selected 标签. 此时就无法查询出这个 selectedH3
        titleDiv.innerHTML = selectedH3.innerHTML;
    }
    // 3. 发送 ajax 请求给服务器, 获取到该会话的历史消息. 
    $.ajax({
        type: 'get',
        url: 'message/getMessages?sessionId=' + sessionId,
        success: function(result) {
            // 此处返回的 body 是个 js 对象数组, 里面的每个元素都是一条消息. 
            // 直接遍历即可. 
            if (result.code == 200 && result.data != null) {
                for (let message of result.data) {
                    addMessage(messageShowDiv, message);
                }
                // 加个操作: 在构造好消息列表之后, 控制滚动条, 自动滚动到最下方. 
                scrollBottom(messageShowDiv);
            }
        }
    });
}

function addMessage(messageShowDiv, message) {
    // 使用这个 div 表示一条消息
    let messageDiv = document.createElement('div');
    // 此处需要针对当前消息是不是用户自己发的, 决定是靠左还是靠右. 
    let selfUsername = document.querySelector('.left .user').innerHTML;
    if (selfUsername == message.fromName) {
        // 消息是自己发的. 靠右
        messageDiv.className = 'message message-right';
    } else {
        // 消息是别人发的. 靠左
        messageDiv.className = 'message message-left';
    }
    messageDiv.innerHTML = '<div class="box">' 
        + '<h4>' + message.fromName + '</h4>'
        + '<p>' + message.content + '</p>'
        + '</div>';
        // 将消息滚动到最下面
    messageShowDiv.appendChild(messageDiv);
}

// 把 messageShowDiv 里的内容滚动到底部. 
function scrollBottom(elem) {
    // 1. 获取到可视区域的高度
    let clientHeight = elem.offsetHeight;
    // 2. 获取到内容的总高度
    let scrollHeight = elem.scrollHeight;
    // 3. 进行滚动操作, 第一个参数是水平方向滚动的尺寸. 第二个参数是垂直方向滚动的尺寸
    elem.scrollTo(0, scrollHeight - clientHeight);
}

// 点击好友列表项, 触发的函数
function clickFriend(friend) {
    // 1. 先判定一下当前这个好友是否有对应的会话. 
    //    使用一个单独的函数来实现. 这个函数参数是用户的名字. 返回值是一个 li 标签. 找到了就是返回了对应会话列表里的 li; 如果没找到, 返回 null
    let sessionLi = findSessionByName(friend.friendName);
    let sessionListUL = document.querySelector('#session-list');
    if (sessionLi) {
        // 2. 如果存在匹配的结果, 就把这个会话设置成选中状态, 获取历史消息, 并且置顶. 
        //    insertBefore 把这个找到的 li 标签放到最前面去. 
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        //    此处设置会话选中状态, 获取历史消息, 这俩功能其实在上面的 clickSession 中已经有了. 
        //    此处直接调用 clickSession 即可
        //    clickSession(sessionLi);
        //    或者还可以模拟一下点击操作. 
        sessionLi.click();
    } else {
        // 3. 如果不存在匹配的结果, 就创建个新会话(创建 li 标签 + 通知服务器)
        sessionLi = document.createElement('li');
        sessionLi.className = "session";
        //    构造 li 标签内容. 由于新会话没有 "最后一条消息", p 标签内容就设为空即可
        sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>' + '<p></p>';
        //    把标签进行置顶
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        sessionLi.onclick = function() {
            clickSession(sessionLi);
        }
        sessionLi.click();
        //     发送消息给服务器, 告诉服务器当前新创建的会话是啥样的. 
        createSession(friend.friendId, sessionLi);
    }
    // 4. 还需要把标签页给切换到 会话列表. 
    //    实现方式很容易, 只要找到会话列表标签页按钮, 模拟一个点击操作即可. 
    let tabSession = document.querySelector('.tab .tab-session');
    tabSession.click();
}

function findSessionByName(username) {
    // 先获取到会话列表中所有的 li 标签
    // 然后依次遍历, 看看这些 li 标签谁的名字和要查找的名字一致. 
    let sessionLis = document.querySelectorAll('#session-list>li');
    for (let sessionLi of sessionLis) {
        // 获取到该 li 标签里的 h3 标签, 进一步得到名字
        let h3 = sessionLi.querySelector('h3');
        if (h3.innerHTML == username) {
            return sessionLi;
        }
    }
    return null;
}

// friendId 是构造 HTTP 请求时必备的信息
function createSession(friendId, sessionLi) {
    $.ajax({
        type: 'post',
        url: 'session/addSession?toUserId=' + friendId,
        success: function(body) {
            if(body.code == 200 && body.data.sessionId > 0) {
                console.log("会话创建成功! sessionId = " + body.data.sessionId);
                sessionLi.setAttribute('message-session-id', body.data.sessionId);
            }  
        }, 
        error: function() {
            console.log('会话创建失败!');
        }
    });
}



//////////////////////////////////////////////////////////////////////////
/////////////////                添加好友           ///////////////////////
//////////////////////////////////////////////////////////////////////////

function searchUser() {
    // 1. 获取到发送按钮 和 消息输入框
    let searchButton = document.querySelector('.left .search button');
    let messageInput = document.querySelector('.left .message-input');
    $.ajax({
        type: 'post',
        url: 'user/searchUser',
        success: function(body) {
            // 从服务器获取到数据. 
            // 校验结果是否有效. 
            if (body.code == 200 && body.data != null) {
                // 1. 先清空右侧列表中的已有内容
                let titleDiv = document.querySelector('.right .title');
                titleDiv.innerHTML = '';
            } else {
                // 如果结果无效, 当前未登录! 则跳转到登录页面. 
                alert("当前用户未登录!");
                location.assign('login.html');
            }
        }
    });
}


// 点击搜索按钮，查找相关用户
function clickSearchButton() {
    // 1. 获取到发送按钮 和 消息输入框
    let searchButton = document.querySelector('.left .search button');
    let searchMessage = document.querySelector('.left .search input');
    console.log(searchMessage.value);
    // 2. 给发送按钮注册一个点击事件
    searchButton.onclick = function() {
        // a) 先针对输入框的内容做个简单判定. 比如输入框内容为空, 则啥都不干
        if (!searchMessage.value) {
            // value 的值是 null 或者 '' 都会触发这个条件
            return;
        }
        $.ajax({
            type: 'post',
            url:  'user/searchUsers',
            data: {
                username: searchMessage.value
            },
            success: function(result) {
                console.log(result.data);
                    // 1. 先清空右侧列表中的已有内容
                let titleDiv = document.querySelector('.right .title');
                titleDiv.innerHTML = "相关用户搜索结果";
                let messageShowDiv = document.querySelector('.right .message-show');
                messageShowDiv.innerHTML = '';
                searchMessage.value = "";
                searchMessage.setAttribute('placeholder', '搜索');

                // 2. 对响应结果放在消息展示区上
                if(result.code == 200 && result.data != null) {
                    for(let user of result.data) {
                        showUserInfo(messageShowDiv, user)
                    }
                } else {
                    let hintDiv = document.createElement('div');
                    hintDiv.innerHTML = "找不到相关用户";
                    messageShowDiv.appendChild(hintDiv);
                }
                // 此处返回的 body 是个 js 对象数组, 里面的每个元素都是一条消息. 
                // 直接遍历即可. 
                // for (let data of body.data) {
                //     addMessage(messageShowDiv, message);
                // }
                // // 加个操作: 在构造好消息列表之后, 控制滚动条, 自动滚动到最下方. 
                // scrollBottom(messageShowDiv);
            }
        });
    }
}
clickSearchButton();


// 根据模糊查询展示出搜索结果
function showUserInfo(messageShowDiv, user) {
    // 创建一个临时容器，再从容器取出元素，否则会出现 null 错误
    // 创建一个临时容器，再从容器取出元素，否则会出现 null 错误
    // 创建一个临时容器，再从容器取出元素，否则会出现 null 错误
    var tempContainer = document.createElement("div");
    liString = '<div class="addUser">' + 
        '<span>' + user.username + '</span>' +
        '<input type="text" placeholder="请输入验证信息">' +
        '<button>添加</button>' + 
        '</div>';        

    tempContainer.innerHTML = liString;
    var div = tempContainer.querySelector('.addUser');  
    div.className = "addUser";    
    var addButton = div.querySelector('button');

    console.log(user);
    addButton.onclick = function() {
        initAddButton(user.id, div);
    }
    messageShowDiv.appendChild(div);
}       

// 当点击添加请求，websocket发送数据
function initAddButton(userId, userInfoDiv) {
    let fromId = document.querySelector('.main .left .user').getAttribute("user-id");

    let allDivs = document.querySelectorAll('body > div.client-container > div > div.right > div.message-show > div');
    for(let addUser of allDivs) {

        if(addUser == userInfoDiv) {
            var requestInput = addUser.querySelector(' input');
            // a) 构造 json 数据
            let req = {
                type: 'addFriend',
                fromId: fromId,
                toId: userId,
                requestMessage: requestInput.value
            };

            req = JSON.stringify(req);
            console.log("[websocket] addFriend: " + req);
            // b) 通过 websocket 发送消息
            websocket.send(req);
            // c) 发送完成之后, 清空之前的输入框
            alert("请求发送成功")
            requestInput.value = "";
        }
    }
}


